import { useState } from 'react'
import { Link } from 'react-router-dom'
import { Card, Breadcrumb, Form, Button, Radio, DatePicker, Select } from 'antd'
import 'dayjs/locale/zh-cn'
import zhCN from 'antd/es/date-picker/locale/zh_CN'
import './index.scss'
import List from './components/List'
import { useStore } from '@/store'
import { observer } from 'mobx-react-lite'
const { RangePicker } = DatePicker
const { Option } = Select

const Article = () => {
  // 获取仓库
  const store = useStore()

  // 存储过滤条件
  let [filterParmas, setFilterParmas] = useState({})
  const onFinish = (values) => {
    setFilterParmas(values)
  }

  return (
    <div>
      <Card
        title={
          <Breadcrumb
            className="black"
            separator=">"
            items={[
              {
                title: <Link to="/">首页</Link>
              },
              {
                title: '内容管理'
              }
            ]}
          />
        }
        style={{ marginBottom: 20 }}
      >
        {/* 筛选内容 */}
        <Form onFinish={onFinish} initialValues={{ status: '' }}>
          {/* 状态 */}
          <Form.Item label="状态" name="status">
            <Radio.Group>
              <Radio value={''}>全部</Radio>
              <Radio value={0}>草稿</Radio>
              <Radio value={1}>待审核</Radio>
              <Radio value={2}>审核通过</Radio>
              <Radio value={3}>审核失败</Radio>
            </Radio.Group>
          </Form.Item>
          {/* 频道 */}
          <Form.Item label="频道" name="channel_id" initialValue="前端">
            <Select placeholder="请选择文章频道" style={{ width: 120 }}>
              {store.Channels.list.map((item) => (
                <Option key={item.id} value={item.name}>
                  {item.name}
                </Option>
              ))}
            </Select>
          </Form.Item>
          {/* 日期 */}
          <Form.Item label="日期" name="date">
            {/* 传入locale属性 控制中文显示*/}
            <RangePicker locale={zhCN}></RangePicker>
          </Form.Item>
          {/* 筛选按钮 */}
          <Form.Item>
            <Button type="primary" htmlType="submit" style={{ marginLeft: 80 }}>
              筛选
            </Button>
          </Form.Item>
        </Form>
        {/* 列表区域 */}
        <List filterParmas={filterParmas} />
      </Card>
    </div>
  )
}

export default observer(Article)